<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 敏感词管理
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.name" placeholder="请输入关键字" class="width300 mr20"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<el-button type="primary" icon="el-icon-lx-add" class="handle-del margin-bottom20" @click="handleEdit">新增
			</el-button>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="敏感词名称"></el-table-column>
				<el-table-column prop="name" label="敏感词类型">
					<template slot-scope="scope">
						{{scope.row.level==0?'完全禁止':'需要审核'}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="300">
					<template slot-scope="scope">
						<el-button type="text" @click="handleEdit(scope.row)">编辑敏感词
						</el-button>
						<el-button v-if="scope.row.level==0||scope.row.level==null" type="text"
							@click="releaseHandle(scope.$index, scope.row,1)">变为需审核
						</el-button>
						<el-button v-else-if="scope.row.level==1" type="text" @click="releaseHandle(scope.$index, scope.row,0)">变为禁止
						</el-button>
						<el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="90px">
				<el-form-item label="敏感词名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="addCategory">确 定</el-button>
			</span>
		</el-dialog>


	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					name: '',
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				editVisible: false,
				editAddVisible: false,
				editCityVisible: false,
				pageTotal: 0,
				form: {},
				title: ''
			};
		},
		created() {
			this.getData();
		},

		methods: {
			// 获取 easy-mock 的模拟数据
			async getData() {
				const res = await this.$get('/admin/badWord/page', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			//新增编辑敏感词
			async addCategory() {
				if (this.$.isEmpty(this.form.name)) {
					this.$message.warning('请输入敏感词!')
					return
				}
				const res = await this.$post('/admin/badWord/saveBadWord', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功');
					this.getData();
					this.editVisible = false;
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$get('/admin/badWord/delete', {
						id: row.id
					}).then(res => {
						this.$message.success('操作成功');
						this.getData();
					})
				}).catch(() => {
					vm.$message.success('处理失败！');
				});
			},
			// 编辑操作
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '新增'
					this.form = {}
				}
				this.editVisible = true;
			},
			releaseHandle(index, row, type) {
				this.$confirm('确定要' + (type == 1 ? '需审核' : '禁止') + '敏感词【' + row.name + '】吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$post('/admin/badWord/isLevel', {
						id: row.id,
						level: type,
					}).then(res => {
						this.$message.success((type == 1 ? '需审核' : '禁止') + '成功');
						this.getData();
					})
				});
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 200px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 16px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.mr20 {
		margin-right: 20px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>